import Link from './link'
import View from './view'

let Vue = null

class VueRouter {
    constructor (options) {
        // 保存路由选项
        this.$options = options
        
        // 声明一个响应式数据，存放当前路由路径
        // Vue.util.defineReactive(this, 'currentPath', '/')
        
        // 将matched声明为一个响应式数据，存放当前匹配的路由数组
        Vue.util.defineReactive(this, 'matched', [])
        
        // 监听初始化和hash值变化时，改变当前路由路径
        window.addEventListener('hashchange', this.onHashChange.bind(this))
        window.addEventListener('load', this.onHashChange.bind(this))
        
        // 创建路由map，保存路由表
        // this.routeMap = {}
        // this.$options.routes.forEach(route => {
        //    this.routeMap[route.path] = route
        // })
    }
    
    onHashChange () {
        // 这里只是先简单将 # 后的路径赋值给currentPath
        // this.currentPath = window.location.hash.slice(1)
        
        // 获取当前hash路径
        this.current = window.location.hash.slice(1)
        
        this.matched = []
        // 匹配hash路径对应的路由
        this.match()
    }
    
    match (routes) {
        routes = routes || this.$options.routes
        
        // 遍历路由选项
        for (let route of routes) {
            if (route.path === '/' && this.current === '/') {
                this.matched.push(route)
                return
            }
            
            // 匹配嵌套路由的情况
            if (route.path !== '/' && this.current.indexOf(route.path) !== -1) {
                this.matched.push(route)
                if (route.children) {
                    this.match(route.children)
                }
                return
            }
        }
    }
}

// Vue插件需要声明一个install方法
VueRouter.install = function (_Vue) {
    // 保存Vue引用
    Vue = _Vue
    // 全局混入beforeCreate生命周期方法
    Vue.mixin({
        beforeCreate() {
            // 只要在Vue根实例中挂载，利用只有根实例选项上有router属性找到根实例
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router
            }
        }
    })
    
    // 注册全局组件
    Vue.component('router-link', Link)
    Vue.component('router-view', View)
}